PWA Night vol.13 ～Webブラウザ最前線～

https://gyazo.com/dc5031e15fba6cf5f8fd50cf970a83d8

https://pwanight.connpass.com/event/164169/

PWA開発者の知るべきアニメーションの3個

https://birtles.github.io/pwanight13/

Brian Birtles

株式会社Birchill

2014-2019はFirefoxの開発に携わっていた

W3Cメンバー

CSS Transitionを発生するためのスタイル変更

transitionが便利

ブラウザが何をやっているかを把握する

いくつものフレームを用意している

Style

なにかのプロパティが変わった瞬間にtransitionが生成される

Layout

Painiting

Script

requestAnimationFrameを使う

https://gyazo.com/175d7adfc1306b4e2a681b2ab412ecfc

たまにChromeまたSafariでtransitionが走るけど、Chromeのエンジニアによると、これはChromeのバグです

https://gyazo.com/890a0404b05dac75283d81ba2a09c0d5

強制的に更新させる

getComputedStyle(hoge).transform

かなり重いので注意

layoutが走ってボックスモデル再計算するため

以下のときは計算されたスタイルはない

createElementの直後

display:none

CSS Transitionが終わらないことがある

removeをする

要素が display:none になったら？

要素が再生成されたら？

transition-property の計算値が変わったら？

要素が削除されたら？

キャンセルされてtransitionendが発火されない

mozilaのバグ報告でよくあがる

transitionrun や transitioncancelが実装予定

animationcancelもある

Web Animations APIを使ってみる

https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API

確実に動くよ

code:animation.js

button.onclick = () => {

// パネルを作る

const panel = document.createElement('div');

panel.classList.add('panel');

panel.textContent = 'ハロー！';

parent.appendChild(panel);

// アニメーションさせる

panel.style.transform = 'scale(0)';

getComputedStyle(panel).transform;

panel.style.transition = 'transform .5s';

panel.style.transform = 'scale(1)';

panel.animate(

{ transform: 'scale(0)', 'scale(1)' },

{ duration: 500, easing: 'ease' }

);

};

Animation.finished

Promise

キャンセルされるとリジェクトされる

CSS Transtionと併用できる

hoge.getAnimations()[Array]で取得できる

CSSTransition.setKeyframes()でキーフレームを見ることができる

https://gyazo.com/9b44aaa466a2b35f446dac751a2f12c5

SPA

一部にDOMを入れるとき

トランジショングループでラップする

反応が遅くなる

https://gyazo.com/22dc2a6d20d02d933127a8d2ab8a533a

すべての要素をDOMに入れる

code:dom-wrap-route.jsx.html

<Route render={({ location }) => (

)}/>

</Router>

描画順が減って、パフォーマンスが良くなる

https://gyazo.com/f0c149e055d0b3e679e025110be10192

Chrome Dev Summit 2019振り返り

ka2jun8

CDSとは

https://developer.chrome.com/devsummit/

Chromeが考えるWebの最先端技術を発表する場

気になった発表

KeyNote

Next.jsのCEOが喋ってて驚いた

ライブでコード書き換えてlighthouseの点数上がりを確認

Protectiing users on a thriving web

セキュリティまわり

example.com

文字の間に見えない文字列が入ってると別のURLに遷移される

似ているサイトだけどこっちでは？という誘導がある

プライバシー問題

SameSite Cookie

パーソナル情報をとれない

そういうAdが取れない

52%のrevenueが減る

所感

厳しい気持ちはわかる

パーソナライズのもわかる

しかしそういう時代じゃない

マーケ側にも理解してもらう

What's new with sign up and sign in on the web

2FAするときに入力サポート

指紋認証ができるように

Speed Tooling evolutions: 2019 and beyond

LCPが最重要に

CIの紹介

dockerで建てるのは大変

連続デプロイはできなくなる

Adoptive Loading - Improving the user experience for milions on low-end devices

弱い端末なら普通、良い端末なら早くなる

Lowやhighでwebpack chunkをつけてそれぞれで分けて不要なコードは落とさないように

所感

クッソ大変そう

レンダリングでユーザイベントをブロックするのか

The main thread is overworked & underpaid

Main threadはUI thred

ソレ以外のロジックはWebWorkerを使おう

Proxxを参考にしてみよう

Next generation web styling

ダークモード

縦書き

画像フィルタ

PWA and the installable web

Don't be. Annoying!

OYOで使っている

Bridging the native app

Project FUGU